<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>商品详情</title>
	<link rel="stylesheet" href="./css/details.css" />
	<style>
		body {
			font-size: 12px;
			color: gray;
			margin: 0px;
			padding: 0px;
			font-family: "微软雅黑";
		}

		span:hover {
			color: rgb(255, 78, 0);
		}

		.top {
			display: flex;
			justify-content: space-between;
			background-color: rgb(244, 244, 244);
			padding: 7px;
		}

		.top_2 {
			display: flex;
		}

		.top_2 span {
			margin-left: 7px;
		}

		.search {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
		}

		.search_text {
			display: flex;
		}

		.search_text span {
			margin-right: 10px;
			margin-top: 10px;
		}

		.search_input {
			border: 2px solid red;
			display: flex;
		}

		.input_search {
			padding: 10px;
			border: none;
			width: 500px;
			outline: none;
			font-size: 16px;
		}

		.input_button {
			width: 100px;
			border: none;
			color: white;
			background-color: red;
			outline: none;
			height: 42px;
		}

		.input_button:hover {
			background-color: rgb(197, 3, 3);
		}

		.search_car button {
			padding: 13px;
			border: 1px solid gray;
			margin-right: 100px;
		}

		.search_img {
			margin-left: 100px;
		}

		.main {
			width: 85%;
			margin: 0 auto;
		}

		.main_top {
			display: flex;
			font-size: 16px;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2px solid rgb(255, 78, 0);
		}

		.flex {
			display: flex;
		}

		.top_text1 {
			padding: 10px 20px;
			padding-right: 30px;
			background-color: rgb(255, 60, 60);
			color: white;
			width: 151px;
		}

		.top_text2 {
			align-items: center;
		}

		.top_text2 span {
			margin: 0px 20px;
			font-weight: bold;
		}

		.top_text2 span:hover {
			color: red;
		}

		.main_top_head {
			margin: 20px 0;
			display: flex;
			justify-content: space-between;
			margin-bottom: auto;
		}
	</style>
</head>

<body>
	<nav>
		<div class="top">
			<div style="margin-left: 20px">送货至:四川</div>
			<div class="top_2">
				<span> <a href="./登录.html"> 你好请登录:</a> </span>
				<span> <a href="./注册.html">免费注册</a> </span>
				<span> | </span>
				<span>我的订单</span>
				<span> | </span>
				<span>收藏夹</span>
				<span>客户服务</span>
				<span>网站导航</span>
				<span>|</span>
				<span>关注我们：</span>
				<span><img src="img/sh1.png" alt="" /></span>
				<span><img src="img/sh2.png" alt="" /></span>
				<span>|</span>
				<span>手机版</span>
				<span><img src="img/i_tel.png" alt="" width="12px" /></span>
			</div>
		</div>

		<form action="">
			<div class="search">
				<div class="search_img"><img src="img/logo.png" alt="" /></div>
				<div>
					<div class="search_input">
						<input class="input_search" type="text" placeholder="请输入关键词" /><input class="input_button"
							type="button" value="搜索" />
					</div>
					<div class="search_text">
						<span>咖啡</span>
						<span>iphone</span>
						<span>6S新鲜美食</span>
						<span>蛋糕日用品</span>
						<span>连衣裙</span>
					</div>
				</div>
				<div class="search_car">
					<button type="submit">
						<img src="img/car.png" alt="" />
						<span style="margin: 14px">购物车</span>
					</button>
				</div>
			</div>
		</form>
	</nav>

	<div class="main">
		<div class="main_top">
			<div class="flex main_top_head">
				<div class="top_text1">全部商品分类</div>
				<div class="flex top_text2">
					<span> <a href="./首页.html">首页</a> </span>
					<span> 自营超市</span>
					<span> 1号团</span>
					<span> 1号超市</span>
					<span> 女装</span>
					<span> 美妆</span>
					<span> 1号海购</span>
					<span> 团购</span>
				</div>
			</div>

			<div>
				<img src="img/i_tel.png" alt="" width="15px" /> 手机下单惊喜多
			</div>
		</div>

		<div class="main_titile1">
			<span>所有团购</span>
			<span>></span>
			<span>包饰</span>
			<span>></span>
			<span>珠韵首饰</span>
			<div><span>冰韵天然白色正园S925银扣珍珠项链</span></div>
		</div>

		<div class="main_shop_center">
			<div>
				<img src="img/p_big.jpg" alt="" />
			</div>

			<div class="main_shop_details">
				<span style="font-size: 26px; color: black">珠韵首饰冰韵天然白色正圆S925银扣珍珠项链</span>
				<span>全国包邮送妈妈,正圆级淡水珍珠,白色S925银链扣,使用方便,尊贵礼物。</span>
				<span>本店价格: <span style="color: rgb(255,60,60);font-size:22px">￥1786</span> </span>
				<span>参考价:￥3886</span>
				<div>
					<div>
						<span>尺码：</span>
					</div>

					<div style="position: relative;">
						<input class="button1" type="button" value="43cm" />
						<div style="position: absolute;top: -2px;
    left: 17px;">
							<img src="img/ch.png" alt="" style="position:absolute;left: 20px;">
						</div>
					</div>

					<div>
						<input class="button1" type="button" value="45cm" />
					</div>
					<div>
						<input class="button1" type="button" value="50cm" />
					</div>
				</div>
				<div>

					<span>颜色：</span>
					<input class="button1" type="button" value="粉色" />
					<input class="button1" type="button" value="白色" />
				</div>

				<div>
					<a href="#"><img src="img/sh.png" alt="" />分享</a>
					<a href="#"><img src="img/heart_h.png" alt="" />分享</a>
				</div>

				<div>
					<input type="number" name="" id="" minlength="1" value="1" />
					<input type="button" value="加入购物车" />
				</div>
			</div>

			<div style="display: flex; flex-direction: column; margin-left: auto">
				<img src="img/sbrand.jpg" alt="" height="160px" />
				<div style="
              padding: 5px 10px;
              background-color: lightgray;
              color: #000;
              text-align: center;
              line-height: 30px;
              font-size: 16px;
            ">
					为爱助力
				</div>
			</div>
		</div>
		<div class="img_group">
			<div style="border: none"><img src="img/r_left.png" alt="" /></div>
			<div><img src="img/ps1.jpg" height="100px" alt="" /></div>
			<div><img src="img/ps2.jpg" height="100px" alt="" /></div>
			<div><img src="img/ps3.jpg" height="100px" alt="" /></div>
			<div><img src="img/ps4.jpg" height="100px" alt="" /></div>
			<div style="border: none"><img src="img/r_right.png" alt="" /></div>
		</div>

		<div class="shop">
			<div class="shop_left">
				<div style="
              border: 1px solid lightgray;
              padding: 3px 8px;
              font-size: 15px;
              background-color: rgb(246, 246, 246);
              border-right: none;
            ">
					用户还喜欢
				</div>
				<div class="shop_left_div1">
					<div><img src="img/his_1.jpg" alt="" /></div>
					<span class="shop_left_div1_text1">Dior/迪奥香水2件套装 </span>
					<span class="shop_left_div1_text2">￥368.00 </span>
				</div>
				<div class="shop_left_div1">
					<div><img src="img/his_2.jpg" alt="" /></div>
					<span class="shop_left_div1_text1">Dior/迪奥香水2件套装 </span>
					<span class="shop_left_div1_text2">￥368.00 </span>
				</div>
				<div class="shop_left_div1">
					<div><img src="img/his_3.jpg" alt="" /></div>
					<span class="shop_left_div1_text1">Dior/迪奥香水2件套装 </span>
					<span class="shop_left_div1_text2">￥368.00 </span>
				</div>
				<div class="shop_left_div1">
					<div><img src="img/his_4.jpg" alt="" /></div>
					<span class="shop_left_div1_text1">Dior/迪奥香水2件套装 </span>
					<span class="shop_left_div1_text2">￥368.00 </span>
				</div>
				<div class="shop_left_div1">
					<div><img src="img/his_5.jpg" alt="" /></div>
					<span class="shop_left_div1_text1">Dior/迪奥香水2件套装 </span>
					<span class="shop_left_div1_text2">￥368.00 </span>
				</div>
			</div>

			<div class="shop_right">
				<div class="shop_div1">
					<!-- 每一个端都有一个头，还是用了左右的布局，其实感觉都可以 -->
					<div class="shop_right_title">
						<span>推荐配置</span>
					</div>
					<div class="shop_right_row">
						<div class="shop_right_col">
							<img src="img/mat_1.jpg" alt="" />
							<span>粤邇国际珠宝99定金 </span>
							<div>
								<input type="checkbox" name="" id="" />
								<span style="font-size: 20px">￥76</span>
							</div>
						</div>
						<div>
							<img src="img/jia_b.gif" alt="" />
						</div>
						<div class="shop_right_col">
							<img src="img/mat_2.jpg" alt="" />
							<span>粤邇国际珠宝99定金 </span>
							<div>
								<input type="checkbox" name="" id="" />
								<span style="font-size: 20px">￥76</span>
							</div>
						</div>
						<div>
							<img src="img/jia_b.gif" alt="" />
						</div>
						<div class="shop_right_col">
							<img src="img/mat_3.jpg" alt="" />
							<span>粤邇国际珠宝99定金 </span>
							<div>
								<input type="checkbox" name="" id="" />
								<span style="font-size: 20px">￥76</span>
							</div>
						</div>
						<div>
							<img src="img/denyu.jpg" alt="" />
						</div>
						<div style="display:flex;flex-direction:column">
							<span>套餐价 <span style="color:rgb(255, 78, 0);font-size: 20px;">￥2000</span></span>
							<input style="width:50px;margin: 10px 0;" type="number" name="" id="" value="1" min="1">
							<input
								style="widows: 70px; height:50px;font-size:18px; color:#fff;background-color: rgb(255, 78, 0); border: none;"
								type="button" value="组合购买">
						</div>
					</div>




				</div>

				<div class="shop_div1">
					<!-- 每一个端都有一个头，还是用了左右的布局，其实感觉都可以 -->
					<div class="shop_right_title">
						<span style="border-top: 2px solid rgb(255, 78, 0);">商品属性</span><span
							style="border-top: none; border-bottom: 1px solid lightgray;">商品详情</span><span
							style="border-top: none;border-bottom: 1px solid lightgray;">商品评论</span>
					</div>
					<div class="shop_right_row">
						<div class="shop_right_col">
							<span>商品名称:天然淡水珍珠</span>
							<span>商品毛重: 160.00g</span>
							<span>镶嵌材质:纯银</span>
						</div>
						<div class="shop_right_col">
							<span>商品编号: 1546211</span>
							<span>商品产地:法国</span>
							<span>款式:项链</span>
						</div>
						<div class="shop_right_col">
							<span>品牌:珠韵首饰</span>
							<span> 珍珠形状:正圆</span>
						</div>
						<div class="shop_right_col">
							<span>上架时间: 2015-09-06 09:19:09</span>
						</div>
					</div>
				</div>

				<div class="shop_div2">
					<div class="shop_div2_title">
						<span>商品详情</span>
					</div>
					<div class="shop_div2_imgs">
						<div>
							<img src="img/de2.jpg" alt="">
						</div>
						<div>
							<img src="img/de3.jpg" alt="">
						</div>
						<div>
							<img src="img/de4.jpg" alt="">
						</div>
						<div>
							<img src="img/de5.jpg" alt="">
						</div>
						<div>
							<img src="img/de6.jpg" alt="">
						</div>
						<div>
							<img src="img/de7.jpg" alt="">
						</div>
						<div>
							<img src="img/de8.jpg" alt="">
						</div>
					</div>
				</div>

				<div class="shop_div3">
					<div class="shop_div2_title">
						<span>商品评论</span>
					</div>
					<div class="shop_div3_p">
						<div class="shop_div3_p_div1">
							<span style="font-size: 40px;color: rgb(255, 78, 0);">
								80.8%
							</span>
							<span style="color: rgb(255, 78, 0)">
								好评度
							</span>
						</div>
						<div class="shop_div3_p_div2">
							<div>
								<span>好评（80%）</span>
								<div class="jingdu1">
									<div class="jingdu2" style="width:80%">80%</div>
								</div>
							</div>
							<div>
								<span>中评（80%）</span>
								<div class="jingdu1">
									<div class="jingdu2" style="width:20%">20%</div>
								</div>
							</div>
							<div>
								<span>差评（80%）</span>
								<div class="jingdu1">
									<div class="jingdu2" style="width:0%">0%</div>
								</div>
							</div>

						</div>

						<div class="shop_div3_p_div3">
							购买过珠韵首饰天然银扣珍珠项链
							的顾客,在收到商品才可以对该商
							品发表评论
						</div>

						<div class="shop_div3_p_div4">
							<span>您可对已购买商品进行评价</span>
							<input type="button" value="我要评论">
						</div>
					</div>

					<div class="shop_div3_text">
						<div class="shop_div3_text_row">
							<div>
								<img src="img/peo1.jpg" alt="">
								<span>向死而生</span>
							</div>
							<div class="flexv">
								<span>颜色分类:粉色</span>
								<span>型号：43cm</span>
							</div>
							<div class="flexv">
								<span>产品很好,香味很喜欢,必须给赞。</span>
								<span>2015-09-24</span>
							</div>

						</div>

						<div class="shop_div3_text_row">
							<div>
								<img src="img/peo2.jpg" alt="">
								<span>就是这么想的</span>
							</div>
							<div class="flexv">
								<span>颜色分类:粉色</span>
								<span>型号：43cm</span>
							</div>
							<div class="flexv">
								<span>送朋友,她很喜欢,大爱。.</span>
								<span>2015-09-24</span>
							</div>

						</div>

						<div class="shop_div3_text_row">
							<div>
								<img src="img/peo3.jpg" alt="">
								<span>向死而生</span>
							</div>
							<div class="flexv">
								<span>颜色分类:粉色</span>
								<span>型号：43cm</span>
							</div>
							<div class="flexv">
								<span>产品很好,香味很喜欢,必须给赞。</span>
								<span>2015-09-24</span>
							</div>

						</div>

					</div>

					<div class="shop_right_buttons">
						<input class="input1" type="button" value="上一页">
						<input class="input2" type="button" value="1">
						<input class="input2" type="button" value="2">
						<input class="input2" type="button" value="3">
						<span>...</span>
						<input class="input2" type="button" value="20">
						<input class="input1" type="button" value="下一页">
					</div>
				</div>


			</div>
		</div>
	</div>

	<div class="footer">
		<!-- 上半 -->
		<div class="footer_top">
			<div class="fonter_top_left">
				<div class="footer_top_div">
					<span class="cert_div1_font">新手上路</span>
					<span>售后流程</span>
					<span>购物流程</span>
					<span>订购方式</span>
					<span>隐私声明</span>
					<span>推荐分享说明</span>
				</div>


				<div class="footer_top_div">
					<span class="cert_div1_font">配送与支付</span>
					<span>货到付款区域</span>
					<span>配送支付查询</span>
					<span>支付方式说明</span>
				</div>


				<div class="footer_top_div">
					<span class="cert_div1_font">会员中心</span>
					<span>资金管理</span>
					<span>我的收藏</span>
					<span>我的订单</span>
				</div>

				<div class="footer_top_div">
					<span class="cert_div1_font">服务保证</span>
					<span>退换货原则</span>
					<span>售后服务保证</span>
					<span>产品质量保证</span>
				</div>

				<div class="footer_top_div">
					<span class="cert_div1_font">联系我们</span>
					<span>网站故障报告</span>
					<span>购物咨询</span>
					<span>投诉与建议</span>
				</div>


			</div>
			<div>
				<img src="img/lxwm.png" alt="">
			</div>
		</div>
		<!-- 下半 -->
		<div class="footer_bottom">
			<span>
				案许可证编号:蜀ICP备12009302号-1-www dingguagua.com Copyrighto 1号店网上超市2007-2016 , All Rights Reserved. 复制必究
			</span>

			<div class="footer_bottom_logo">
				<div><img src="img/b_1.gif" alt=""></div>
				<div><img src="img/b_2.gif" alt=""></div>
				<div><img src="img/b_3.gif" alt=""></div>
				<div><img src="img/b_4.gif" alt=""></div>
				<div><img src="img/b_5.gif" alt=""></div>
				<div><img src="img/b_6.gif" alt=""></div>
			</div>
		</div>


	</div>
</body>

</html>